:host ::ng-deep .chip-list .mat-chip-list-wrapper {
  margin: 0;
}

.none-display {
  display: none;
}

.normal-chip {
  font-size: 1em;
}

.chip-icon {
  transform: translate(-0.1em);
}

.chip-img {
  transform: translate(-0.2em);
}

.svg-icon {
  margin-left: 0.2em;
  margin-right: 0.12em;
  transform: translate(-0.3em);
  width: 20px;
  height: 20px;
}

.mat-white {
  background-color: #dcdcdc;
  color: #000;
  fill: #000;
}
.mat-blue {
  background-color: #5083b1;
  color: #fff;
  fill: #fff;
}
.mat-purple {
  background-color: #ae82c3;
  color: #fff;
  fill: #fff;
}
.mat-gold {
  background-color: #eba543;
  color: #fff;
  fill: #fff;
}
.mat-red {
  background-color: #e62716;
  color: #fff;
  fill: #fff;
}
.mat-cryo {
  background-color: #187ea0;
  color: #fff;
  fill: #fff;
}
.mat-anemo {
  background-color: #1b6d6e;
  color: #fff;
  fill: #fff;
}
.mat-physical {
  background-color: #adb7bb;
  color: #000;
  fill: #000;
}
.mat-electro {
  background-color: #704691;
  color: #fff;
  fill: #fff;
}
.mat-geo {
  background-color: #a7721e;
  color: #fff;
  fill: #fff;
}
.mat-pyro {
  background-color: #b1412b;
  color: #fff;
  fill: #fff;
}
.mat-hydro {
  background-color: #2e66aa;
  color: #fff;
  fill: #fff;
}
.mat-dendro {
  background-color: #296d34;
  color: #fff;
  fill: #fff;
}
